import { Button, ConfigProvider, Space, Input, ColorPicker, Divider, Flex } from 'antd';
import React, { useState } from 'react';
import { Layout, Menu, theme } from 'antd';
import {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    UploadOutlined,
    UserOutlined,
    VideoCameraOutlined,
  } from '@ant-design/icons';
import { Footer } from 'antd/es/layout/layout';

import { useRoutes, useNavigate, RouteObject,     } from 'react-router-dom'
import routes, { menuItems } from './router/router';
const { Header, Sider, Content } = Layout;
const App: React.FC = () => {
  const [primary, setPrimary] = React.useState('#1677ff');
  const [collapsed, setCollapsed] = useState(false);
  const {
    token: { colorBgContainer },
  } = theme.useToken();
  const navigate = useNavigate()
  const onClick = (e: { key: any; }) => {
    navigate(e.key)
  }
  
  let element = useRoutes(routes as Array<RouteObject>)
  return (
    <>
   
      <ConfigProvider
        theme={{
          token: {
            colorPrimary: primary,
          },
        }}
      >
     <Layout style={{ minHeight: '100vh' }}>
      <Sider
        breakpoint="lg"
        collapsedWidth="0"
        onBreakpoint={(broken) => {
          console.log(broken);
        }}
        onCollapse={(collapsed, type) => {
          console.log(collapsed, type);
        }}
      >
        <div className="demo-logo-vertical" />
        <Menu
          theme="dark"
          onClick={onClick}
          mode="inline"
          defaultSelectedKeys={['4']}
          items={menuItems}
        />
      </Sider>
      <Layout>
        <Header style={{ padding: 0, background: colorBgContainer }} >
        <Flex  justify={'flex-end'} align={'center'}>
         
            <ColorPicker  showText value={primary} onChangeComplete={(color) => setPrimary(color.toHexString())} />

        </Flex>
 
        </Header>
        <Content style={{ margin: '24px 16px 0' }}>
          <div style={{ padding: 24, background: colorBgContainer }}>{element}</div>
        </Content>
        <Footer style={{ textAlign: 'center' }}>Ant Design ©2023 Created by Ant UED</Footer>
      </Layout>
   
    </Layout>
      </ConfigProvider>
    </>
  );
}

export default App;